<template>
  <view>
    <u-navbar title="会员中心" title-color="#fff" back-icon-color="#fff" :background="{'backgroundColor': '#f95900',}"
      :border-bottom="false">
    </u-navbar>

    <view class="content">
      <view class="header relative">
        <view class="level absolute f-w-700 f-s-i u-f-ajc">VIP会员</view>
        <view class="shouyi">累计收益</view>
        <view class="u-f-ac u-f-jsb shengji-box">
          <view>200000</view>
          <view class="lijishengji u-f-ajc">立即升级</view>
        </view>
      </view>

      <view class="line-box relative">
        <view class="absolute u-f-ajc">升级后可享以下权益</view>
      </view>

      <view class="radius-box">
        <image src="/static/images/myterritory/table.png" mode="widthFix"></image>
      </view>

    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    onLoad() {

    },
    methods: {

    },
  }
</script>

<style lang="scss">
  page {
    width: 100%;
    background: url(/static/images/myterritory/header-bg.png) no-repeat 0 0;
    background-size: 100% 280rpx;
    background-color: #f4f4f4;
  }

  .content {
    padding: 0 30rpx;
    box-sizing: border-box;
  }

  .header {
    margin-top: 50rpx;
    width: 100%;
    height: 350rpx;
    background: url(/static/images/myterritory/vip-bg.png) no-repeat 0 0;
    background-size: 100% 100%;
    color: #fff;
    padding: 190rpx 50rpx 0;
    box-sizing: border-box;

    .level {
      width: 250rpx;
      height: 80rpx;
      left: 0;
      top: 54rpx;
      font-size: 44rpx;
    }
    .shouyi {
      font-size: 32rpx;
    }
    .shengji-box {
      view {
        font-size: 44rpx;
      }
      .lijishengji {
        width: 210rpx;
        height: 80rpx;
        background: url(/static/images/myterritory/lijishengji.png) no-repeat 0 0;
        background-size: 100% 100%;
        color: #AF7844;
        font-size: 30rpx;
      }
    }
  }

  .line-box {
    width: 70%;
    height: 2px;
    margin: 70rpx auto;
    box-sizing: border-box;
    border: 1px dashed #AF7844;
    >view {
      width: 280rpx;
      height: 60rpx;
      background-color: #f4f4f4;
      left: 50%;
      top: 50%;
      margin-top: -30rpx;
      margin-left: -140rpx;
      color: #AF7844;
    }
  }

  .radius-box {
    width: 100%;
    border-radius: 20rpx;
    background-color: #fff;
    padding: 20rpx;
    box-sizing: border-box;
    image {
      width: 100%;
    }
  }
</style>